<extend name="Base/Base" />
<block name="body">
	<div class="container product-detail">
      <div class="row">
        <div class="col-sm-7">
          <div class="image-show">
            <div id="slider" class="flexslider">
                <ul class="slides">
                  <foreach name="product['product_image']" item="image">
                    <li><img src="{$image['thumb']}" /></li>
                  </foreach>              
                </ul>
            </div>
              <div id="carousel" class="flexslider">
                <ul class="slides">
                  <foreach name="product['product_image']" item="image">
                    <li><img src="{$image['thumb']}" /></li>
                  </foreach>                  
                </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-5">          
          <h1>{$info.title}</h1>
          <div class="green-line"></div>
          <div class="product-description">
            {$info.meta_description|htmlspecialchars_decode=###}
            
          </div>
         
        </div>
      </div>
    </div>  
    <div class="container product-content">
      <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-description" data-toggle="tab">{:L('tab_description')}</a></li>
          <if condition="$product['product_attribute']">
          <li><a href="#tab-attribute" data-toggle="tab">{:L('tab_attribute')}</a></li>
          </if>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab-description">
             {$info.content|htmlspecialchars_decode}
          </div>
          <if condition="$product['product_attribute']">
          <div class="tab-pane" id="tab-attribute">
            <table class="table table-bordered">
              <foreach name="product['product_attribute']" item="attribute">
              <thead>
                <tr>
                  <th colspan="2">{$attribute['name']}</th>
                </tr>
              </thead>
              <tbody>
                <foreach name="attribute['attribute']" item="attr">
                <tr><td>{$attr.name}</td><td>{$attr.text|nl2br=###}</td></tr>
                </foreach>
              </tbody>
              </foreach>
            </table>
          </div>
          </if>
        </div>     
    </div>
</block>
<block name="script">
	<script type="text/javascript">
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "fade",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    </script>
</block>